<script setup>
import {ref, onMounted, computed} from 'vue'
import { sessionApi, saveBaseApi, delBasesApi, oneBaseApi, pageBasesApi, sortBaseApi } from '@/commons/api'
import routes from '@/commons/router'
import Loader from '@/components/loader/Loader.vue'
import { CScrollbar } from 'c-scrollbar'
import Selector from '@/components/select/Selector'
import Msg from '@/components/message'
import Confirm from '@/components/confirm'
import Pager from '@/components/pager/Pager.vue'
import Upload from '@/components/upload/Upload'
import { nanoid } from 'nanoid'

const loadShow = ref(false)

// 界面挂载前处理
onMounted(() => {
  // 获取用户会话信息
  checkAuth()
})

let procAuth = {
  saveAuth: false,
  procAuth: false
}
// checkAuth 获取权限
const checkAuth = async () => {
  loadShow.value = true
  try {
    const res = await sessionApi()
    if (res.code === import.meta.env.VITE_SUCCESS_CODE) {
      const userBtnCode = res.data.btnCodes
      procAuth = {
        saveAuth: userBtnCode.indexOf('1002020301') !== -1,
        procAuth: userBtnCode.indexOf('1002020302') !== -1
      }
      await page(0, 1)
    } else {
      localStorage.removeItem("token")
      Msg({ kind: 'error', txt: res.msg })
      routes.replace('/login')
    }
    loadShow.value = false
  } catch (e) {
    loadShow.value = false
    Msg({ kind: 'error', txt: '系统错误，请联系管理员！' + e })
  }
}

const schRef = ref({
  kind: 0,
  kindName: '',
  keywords: '',
  offset: 0,
  limit: 20
})
const total = ref(0)
const curPage = ref(1)
const qstList = ref([])
const hasData = ref(false)
// page 列表展示
const page = async (offset, cur) => {
  schRef.value.offset = offset || 0
  curPage.value = cur || 1
  hasData.value = false
  const res = await pageBasesApi(schRef.value)
  if(res.code === import.meta.env.VITE_SUCCESS_CODE && res.data) {
    hasData.value = true
    total.value = res.data.total
    qstList.value = res.data.list
    idList.value = []
    checkList.value = []
    allCheck.value = false
    res.data.list.forEach(() => {
      checkList.value.push(false)
    })
  }
}

// search 筛选
const schShow = ref(false)
const search = () => {
  schShow.value = !schShow.value
}

// clrSch 重置搜索框
const clrSch = () => {
  schRef.value = {
    kind: 0,
    keywords: '',
    offset: 0,
    limit: 20
  }
  page(0, 1)
}

// 选择效果实现
const idList = ref([])
const checkList = ref([])
const allCheck = ref(false)
// checkAll 全选
const checkAll = () => {
  idList.value = []
  checkList.value = []
  allCheck.value = !allCheck.value
  if(allCheck.value) {
    qstList.value.forEach(item => {
      idList.value.push(item.qstId)
      checkList.value.push(true)
    })
  } else {
    qstList.value.forEach(() => {
      checkList.value.push(false)
    })
  }
}
// checkCurId 单选
const checkCurId = (idx, roleId) => {
  if(!checkList.value[idx]) {
    idList.value.push(roleId)
  } else {
    idList.value.splice(idList.value.findIndex(id => id === roleId), 1)
  }
  checkList.value[idx] = !checkList.value[idx]
}

let curQstId = nanoid(21)
const qstForm = ref({
  qstId: curQstId,
  kind: 0,
  qstNo: '',
  title: '',
  score: 0,
  answer: '',
  keywords: '',
  fileNames: '',
  fileUrls: '',
  remarks: '',
  optList: [],
  saveType: 1
})
// add 新增
const modalShow = ref(false)
const add = () => {
  curQstId = nanoid(21)
  qstForm.value = {
    qstId: curQstId,
    kind: 1,
    qstNo: '',
    title: '',
    answer: '',
    keywords: '',
    fileNames: '',
    fileUrls: '',
    remarks: '',
    optList:  [
      { optId: nanoid(), qstId: curQstId, optNo: 'A', optName: '', imgNames: '', imgUrls: '', izRight: 2, answer: '', keywords: '', remarks: '' },
      { optId: nanoid(), qstId: curQstId, optNo: 'B', optName: '', imgNames: '', imgUrls: '', izRight: 2, answer: '', keywords: '', remarks: '' },
      { optId: nanoid(), qstId: curQstId, optNo: 'C', optName: '', imgNames: '', imgUrls: '', izRight: 2, answer: '', keywords: '', remarks: '' },
      { optId: nanoid(), qstId: curQstId, optNo: 'D', optName: '', imgNames: '', imgUrls: '', izRight: 2, answer: '', keywords: '', remarks: '' }
    ],
    saveType: 1
  }
  sort(qstForm.value.kind)
  modalShow.value = true
}

// update 修改
const fileList = ref([])
const update = async (qstId) => {
  const res = await oneBaseApi({ qstId })
  if(res.code === import.meta.env.VITE_SUCCESS_CODE) {
    qstForm.value = res.data
    qstForm.value.saveType = 2
    curQstId = qstForm.value.qstId
    if(qstForm.value.kind===3 && qstForm.value.answer) {
      opts.value = qstForm.value.answer.split(',')
    }
    if(qstForm.value.fileNames && qstForm.value.fileNames !== '') {
      const fileNames = qstForm.value.fileNames.split(',')
      const fileUrls = qstForm.value.fileUrls.split(',')
      fileList.value = []
      for(let i = 0; i < fileNames.length; i++) {
        fileList.value.push({ id: nanoid(), name: fileNames[i], url: fileUrls[i], thumb: fileUrls[i] })
      }
    }
    modalShow.value = true
  } else {
    Msg({ kind: 'info', txt: '暂无内容' })
  }
}

// save 保存提交
const save = async () => {
  const title = qstForm.value.title
  const qstNo = qstForm.value.qstNo
  if(title === '' || title.length > 300) {
    Msg({ kind: 'warn', txt: '题目不能为空，且长度不超过300个字符！' })
    return
  } else if(qstNo === '' || qstNo.length > 10) {
    Msg({ kind: 'warn', txt: '题号不能为空，且长度为10位的数字编码！' })
    return
  }
  const optList = qstForm.value.optList
  optList.some(function(opt) {
    opt.izRight = parseFloat(opt.izRight)
    if(opt.optNo === '' || opt.optNo.length > 10) {
      Msg({ kind: 'warn', txt: '答案选项的编号不能为空，且不超过10个字符！' })
      return true
    }
    if(opt.optName === '' || opt.optName.length > 200) {
      Msg({ kind: 'warn', txt: '选项标题/小题题目不能为空，且不超过200个字符！' })
      return true
    }
  })
  loadShow.value = true
  if(fileList.value && fileList.value.length > 0) {
    let names = '', urls = ''
    fileList.value.forEach(file => {
      names += file.name + ','
      urls += file.url + ','
    })
    names = names.substring(0, names.length-1)
    urls = urls.substring(0, urls.length-1)
    qstForm.value.fileNames = names
    qstForm.value.fileUrls = urls
  }
  try {
    const res = await saveBaseApi(qstForm.value)
    if(res.code === import.meta.env.VITE_SUCCESS_CODE) {
      closeModal()
      await page(0, 1)
      Msg({ kind: 'success', txt: '恭喜您，题库信息保存成功！' })
    } else {
      Msg({ kind: 'error', txt: res.msg })
    }
    loadShow.value = false
  } catch (e) {
    loadShow.value = false
    Msg({ kind: 'error', txt: '系统错误，请联系管理员！' + e })
  }
}

// deletes 删除
const deletes = async() => {
  if(!idList || idList.value.length===0) {
    Msg({ kind: 'warn', txt: '请至少选择一项再删除！' })
    return
  }
  Confirm('确定要删除选中的数据吗？').then(() => {
    delBases()
  }).catch(() => {
    Msg({ kind: 'info', txt: "取消删除选中的数据！" })
  })
}
// delBases 删除实现，分离出来防止调用时异步报错
const delBases = async () => {
  const ids = idList.value.join(',')
  loadShow.value = true
  try {
    const res = await delBasesApi({ ids })
    if(res.code === import.meta.env.VITE_SUCCESS_CODE) {
      await page(0, 1)
      Msg({ kind: 'success', txt: '恭喜您，信息删除成功！' })
    } else {
      Msg({ kind: 'error', txt: res.msg })
    }
    loadShow.value = false
  } catch (e) {
    loadShow.value = false
    Msg({ kind: 'error', txt: '系统错误，请联系管理员！' + e })
  }
}

// sort 按钮排序
const sort = async (kind) => {
  const res = await sortBaseApi({ kind })
  if(res.code === import.meta.env.VITE_SUCCESS_CODE) {
    qstForm.value.qstNo = res.data+''
  }
}

const chkShowed = (kind) => {
  qstForm.value = {
    qstId: curQstId,
    kind: 1,
    qstNo: '',
    title: '',
    score: 0,
    answer: '',
    keywords: '',
    fileNames: '',
    fileUrls: '',
    remarks: '',
    optList:  [],
    saveType: 1
  }
  sort(kind)
  switch (kind) {
    case 1: // 单选题
      qstForm.value.kind = 1
      qstForm.value.optList.push({ optId: nanoid(), qstId: curQstId, optNo: 'A', optName: '', imgNames: '', imgUrls: '', izRight: 2, answer: '', keywords: '', remarks: '' })
      qstForm.value.optList.push({ optId: nanoid(), qstId: curQstId, optNo: 'B', optName: '', imgNames: '', imgUrls: '', izRight: 2, answer: '', keywords: '', remarks: '' })
      qstForm.value.optList.push({ optId: nanoid(), qstId: curQstId, optNo: 'C', optName: '', imgNames: '', imgUrls: '', izRight: 2, answer: '', keywords: '', remarks: '' })
      qstForm.value.optList.push({ optId: nanoid(), qstId: curQstId, optNo: 'D', optName: '', imgNames: '', imgUrls: '', izRight: 2, answer: '', keywords: '', remarks: '' })
      break
    case 2: // 判断题
      qstForm.value.kind = 2
      qstForm.value.optList.push({ optId: nanoid(), qstId: curQstId, optNo: 'A', optName: '正确', imgNames: '', imgUrls: '', izRight: 2, answer: '', keywords: '', remarks: '' })
      qstForm.value.optList.push({ optId: nanoid(), qstId: curQstId, optNo: 'B', optName: '错误', imgNames: '', imgUrls: '', izRight: 2, answer: '', keywords: '', remarks: '' })
      break
    case 3: // 多选题
      qstForm.value.kind = 3
      qstForm.value.optList.push({ optId: nanoid(), qstId: curQstId, optNo: 'A', optName: '', imgNames: '', imgUrls: '', izRight: 2, answer: '', keywords: '', remarks: '' })
      qstForm.value.optList.push({ optId: nanoid(), qstId: curQstId, optNo: 'B', optName: '', imgNames: '', imgUrls: '', izRight: 2, answer: '', keywords: '', remarks: '' })
      qstForm.value.optList.push({ optId: nanoid(), qstId: curQstId, optNo: 'C', optName: '', imgNames: '', imgUrls: '', izRight: 2, answer: '', keywords: '', remarks: '' })
      qstForm.value.optList.push({ optId: nanoid(), qstId: curQstId, optNo: 'D', optName: '', imgNames: '', imgUrls: '', izRight: 2, answer: '', keywords: '', remarks: '' })
      break
    case 4: // 填空题
      qstForm.value.kind = 4
      qstForm.value.optList.push({ optId: nanoid(), qstId: curQstId, optNo: '', optName: '', imgNames: '', imgUrls: '', izRight: 2, answer: '', keywords: '', remarks: '' })
      break
    case 5: // 简答题
      qstForm.value.kind = 5
      qstForm.value.optList.push({ optId: nanoid(), qstId: curQstId, optNo: '', optName: '', imgNames: '', imgUrls: '', izRight: 2, answer: '', keywords: '', remarks: '' })
      break
    case 6: // 实操题
      qstForm.value.kind = 6
      qstForm.value.optList.push({ optId: nanoid(), qstId: curQstId, optNo: '', optName: '', imgNames: '', imgUrls: '', izRight: 2, answer: '', keywords: '', remarks: '' })
      break
    default:
      qstForm.value.kind = 1
      break
  }
}

const opts = ref([])
const chkOpt = (kind, idx) => {
  switch (kind) {
    case 1:
      qstForm.value.optList.forEach(opt => {
        opt.izRight = 2
      })
      qstForm.value.optList[idx].izRight = 1
      qstForm.value.answer = qstForm.value.optList[idx].optId
      break
    case 2:
      const opt = qstForm.value.optList[idx]
      opt.izRight = 1
      if (opts.value.indexOf(opt.optId) === -1) {
        opts.value.push(opt.optId)
      } else {
        opt.izRight = 2
        opts.value.splice(opts.value.indexOf(opt.optId), 1)
      }
      qstForm.value.answer = opts.value.join(',')
      break
    case 3:
      qstForm.value.optList.forEach(opt => {
        opt.izRight = 2
      })
      qstForm.value.optList[idx].izRight = 1
      qstForm.value.answer = qstForm.value.optList[idx].optId
      break
  }
}

const addOpt = () => {
  qstForm.value.optList.push({ optId: nanoid(), qstId: curQstId, optNo: '', optName: '', imgNames: '', imgUrls: '', izRight: 2, answer: '', keywords: '', remarks: '' })
}

const delOpt = (opt) => {
  qstForm.value.optList.splice(qstForm.value.optList.indexOf(opt), 1)
}

// closeModal 关闭弹出层，并重置表单数据
const closeModal = () => {
  modalShow.value = false
  qstForm.value = {
    qstId: curQstId,
    kind: 0,
    qstNo: '',
    title: '',
    answer: '',
    keywords: '',
    fileNames: '',
    fileUrls: '',
    remarks: '',
    optList: [],
    saveType: 1
  }
  fileList.value = []
}

const kindList = ref([{ selId: 1, selName: '单选题', selCode: '01' }, { selId: 2, selName: '判断题', selCode: '02' }, { selId: 3, selName: '多选题', selCode: '03' }, { selId: 4, selName: '填空题', selCode: '04' }, { selId: 5, selName: '简答题', selCode: '05' }, { selId: 6, selName: '实操题', selCode: '06' }])
const fmtKind = computed(() =>{
  return (kind) => {
    switch (kind) {
      case 1:
        return '单选题'
      case 2:
        return '判断题'
      case 3:
        return '多选题'
      case 4:
        return '填空题'
      case 5:
        return '简答题'
      case 6:
        return '实操题'
      default:
        return '其它'
    }
  }
})

const setValue = (item, kind) => {
  schRef.value.kind = item.selId
  schRef.value.kindName = item.selName
}
const setUrl = (kind, type, file) => {
  fileList.value = file
}
</script>

<template>
  <div class="qst-a">
    <div class="qst-b">
      <div class="qst-c">
        <div v-if="procAuth.saveAuth" class="btn-pi mr15" title="新增" @click="add"><i class="iconfont">&#xea2d;</i> 新增</div>
        <div v-if="procAuth.procAuth" class="btn-de mr15" title="删除" @click="deletes"><i class="iconfont">&#xea45;</i> 删除</div>
        <div class="btn-r mr15" title="筛选" @click="search"><i class="iconfont">&#xea49;</i></div>
        <div class="btn-r mr15" title="刷新" @click="page(0, 1)"><i class="iconfont">&#xea8c;</i></div>
      </div>
      <div class="qst-d"><i class="iconfont">&#xeaaa;</i> 当前位置：工作台 > 试卷管理 > 题库管理</div>
    </div>
    <div v-show="schShow" class="qst-e">
      <div class="mr15 mt10"><selector :kind="1" :sel-list="kindList" :inboxed="true" :cur-name="schRef.kindName ? schRef.kindName : ''" pre-name="题型" @setValue="setValue" /></div>
      <div class="mr15 mt10"><input type="text" v-model="schRef.keywords" placeholder="请输入关键字" class="sch-ipt" /></div>
      <div class="qst-f mt10">
        <div class="btn-pi mr15" title="搜索" @click="page(0, 1)"><i class="iconfont">&#xea8e;</i> 搜索</div>
        <div class="btn-d" title="重置" @click="clrSch"><i class="iconfont">&#xea4f;</i> 重置</div>
      </div>
    </div>
    <div v-if="hasData">
      <table>
        <tbody>
          <tr>
            <th style="width: 5%;"><span @click="checkAll()" title="全选"><i :class="['iconfont', allCheck ? 'chked' : 'chk']" v-html="allCheck ? '&#xea3a;' : '&#xea46;'" /></span></th>
            <th style="width: 10%;">题型</th>
            <th style="width: 75%;">标题</th>
            <th style="width: 10%;">操作</th>
          </tr>
          <tr v-for="(curBase, index) in qstList" :key="curBase.qstId" class="tr-style">
            <td class="txt-center"><span @click="checkCurId(index, curBase.qstId)" title="选择"><i :class="['iconfont', checkList[index] ? 'chked' : 'chk']" v-html="checkList[index]  ? '&#xe685;' : '&#xe686;'" /></span></td>
            <td class="txt-center">{{ fmtKind(curBase.kind) }}</td>
            <td>{{ curBase.qstNo }}. {{ curBase.title }}</td>
            <td class="txt-center">
              <span v-if="procAuth.saveAuth" class="cl-warn" title="修改" @click="update(curBase.qstId)"><i class="iconfont">&#xea48;</i> 修 改</span>
            </td>
          </tr>
        </tbody>
      </table>
      <pager v-if="hasData" :limit="schRef.limit" :total="total" :page="curPage" @turn="page" />
    </div>
    <div v-else class="no-data">暂无内容</div>

    <!-- 新增、修改问题及答案弹出层 -->
    <transition name="fade-mod" appear>
      <div v-if="modalShow" class="modal-backdrop">
        <c-scrollbar>
          <div class="modal" style="width: 600px;">
            <div class="modal-header">
              <div class="header-left"><i class="iconfont">&#xea54;</i> 保存问题及答案信息</div>
              <div class="header-right" @click="closeModal()"><i class="iconfont fs22">&#xea7f;</i></div>
            </div>
            <div class="modal-body">
              <div>
                <div class="ipt-title"><span class="required">*</span>题型</div>
                <div class="qst-g">
                  <div class="cur qst-h" @click="chkShowed(1)">
                    <i :class="['iconfont', 'mr5', qstForm.kind===1 ? 'chked' : 'chk']" v-html="qstForm.kind===1 ? '&#xe677;' : '&#xe678;'" />
                    <span>单选题</span>
                  </div>
                  <div class="cur qst-h" @click="chkShowed(2)">
                    <i :class="['iconfont', 'mr5', qstForm.kind===2 ? 'chked' : 'chk']" v-html="qstForm.kind===2 ? '&#xe677;' : '&#xe678;'" />
                    <span>判断题</span>
                  </div>
                  <div class="cur qst-h" @click="chkShowed(3)">
                    <i :class="['iconfont', 'mr5', qstForm.kind===3 ? 'chked' : 'chk']" v-html="qstForm.kind===3 ? '&#xe677;' : '&#xe678;'" />
                    <span>多选题</span>
                  </div>
                  <div class="cur qst-h" @click="chkShowed(4)">
                    <i :class="['iconfont', 'mr5', qstForm.kind===4 ? 'chked' : 'chk']" v-html="qstForm.kind===4 ? '&#xe677;' : '&#xe678;'" />
                    <span>填空题</span>
                  </div>
                  <div class="cur qst-h" @click="chkShowed(5)">
                    <i :class="['iconfont', 'mr5', qstForm.kind===5 ? 'chked' : 'chk']" v-html="qstForm.kind===5 ? '&#xe677;' : '&#xe678;'" />
                    <span>简答题</span>
                  </div>
                  <div class="cur qst-h" @click="chkShowed(6)">
                    <i :class="['iconfont', 'mr5', qstForm.kind===6 ? 'chked' : 'chk']" v-html="qstForm.kind===6 ? '&#xe677;' : '&#xe678;'" />
                    <span>实操题</span>
                  </div>
                </div>
              </div>
              <div v-if="qstForm.kind===1">
                <div>
                  <div class="ipt-title"><span class="required">*</span>题目</div>
                  <div class="qst-g">
                    <input type="text" v-model="qstForm.qstNo" maxlength="10" placeholder="题号" class="ipt1 mr15" />
                    <input type="text" v-model="qstForm.title" placeholder="请输入题目" class="ipt2" />
                  </div>
                </div>
                <div>
                  <div class="ipt-title"><span class="required">*</span>附件</div>
                  <upload :kind="3" :types="2" :files="fileList" @setUrl="setUrl" />
                </div>
                <div class="ipt-title qst-g" v-for="(opt, idx) in qstForm.optList" :key="opt.optId">
                  <input type="text" v-model="opt.optNo" maxlength="10" placeholder="选项" class="ipt1 mr15" />
                  <input type="text" v-model="opt.optName" placeholder="请输入答案选项" class="ipt2 mr15" />
                  <i :class="['iconfont mr15 qst-i', opt.izRight===1 ? 'chked' : 'chk']" v-html="opt.izRight===1 ? '&#xe677;' : '&#xe678;'" @click="chkOpt(1, idx)" />
                  <div class="btn-r" @click="delOpt(opt)"><i class="iconfont">&#xea45;</i></div>
                </div>
                <div class="mt10 cl-blue" @click="addOpt"><i class="iconfont">&#xea80;</i> 新增答题选项</div>
              </div>
              <div v-if="qstForm.kind===2">
                <div>
                  <div class="ipt-title"><span class="required">*</span>题目</div>
                  <div class="qst-g">
                    <input type="text" v-model="qstForm.qstNo" maxlength="10" placeholder="题号" class="ipt1 mr15" />
                    <input type="text" v-model="qstForm.title" placeholder="请输入题目" class="ipt2" />
                  </div>
                </div>
                <div>
                  <div class="ipt-title"><span class="required">*</span>附件</div>
                  <upload :kind="3" :types="2" :files="fileList" @setUrl="setUrl" />
                </div>
                <div class="ipt-title qst-g" v-for="(opt, idx) in qstForm.optList" :key="opt.optId">
                  <div @click="chkOpt(1, idx)" class="cur"><i :class="['iconfont qst-i', opt.izRight===1 ? 'chked' : 'chk']" v-html="opt.izRight===1 ? '&#xe677;' : '&#xe678;'" /> {{ opt.optName }}</div>
                </div>
              </div>
              <div v-if="qstForm.kind===3">
                <div>
                  <div class="ipt-title"><span class="required">*</span>题目</div>
                  <div class="qst-g">
                    <input type="text" v-model="qstForm.qstNo" maxlength="10" placeholder="题号" class="ipt1 mr15" />
                    <input type="text" v-model="qstForm.title" placeholder="请输入题目" class="ipt2" />
                  </div>
                </div>
                <div>
                  <div class="ipt-title"><span class="required">*</span>附件</div>
                  <upload :kind="3" :types="2" :files="fileList" @setUrl="setUrl" />
                </div>
                <div class="ipt-title qst-g" v-for="(opt, idx) in qstForm.optList" :key="opt.optId">
                  <input type="text" v-model="opt.optNo" maxlength="10" placeholder="选项" class="ipt1 mr15" />
                  <input type="text" v-model="opt.optName" placeholder="请输入答案选项" class="ipt2 mr15" />
                  <i :class="['iconfont mr15 qst-i', opt.izRight===1 ? 'chked' : 'chk']" v-html="opt.izRight===1 ? '&#xe685;' : '&#xe686;'" @click="chkOpt(2, idx)" />
                  <div class="btn-r" @click="delOpt(opt)"><i class="iconfont">&#xea45;</i></div>
                </div>
                <div class="mt10 cl-blue" @click="addOpt"><i class="iconfont">&#xea80;</i> 新增答题选项</div>
              </div>
              <div v-if="qstForm.kind===4">
                <div>
                  <div class="ipt-title"><span class="required">*</span>题目</div>
                  <div class="qst-g">
                    <input type="text" v-model="qstForm.qstNo" maxlength="10" placeholder="题号" class="ipt1 mr15" />
                    <input type="text" v-model="qstForm.title" placeholder="请输入题目" class="ipt2" />
                  </div>
                </div>
                <div>
                  <div class="ipt-title"><span class="required">*</span>附件</div>
                  <upload :kind="3" :types="2" :files="fileList" @setUrl="setUrl" />
                </div>
                <div class="ipt-title"><span class="required">*</span>正确答案</div>
                <div><textarea v-model="qstForm.answer" class="desc-txt" placeholder="请输入答案，多个答案用 @-@ 相隔"></textarea></div>
              </div>
              <div v-if="qstForm.kind===5">
                <div>
                  <div class="ipt-title"><span class="required">*</span>题目</div>
                  <div class="qst-g">
                    <input type="text" v-model="qstForm.qstNo" maxlength="10" placeholder="题号" class="ipt1 mr15" />
                    <input type="text" v-model="qstForm.title" placeholder="请输入题目" class="ipt2" />
                  </div>
                </div>
                <div>
                  <div class="ipt-title"><span class="required">*</span>附件</div>
                  <upload :kind="3" :types="2" :files="fileList" @setUrl="setUrl" />
                </div>
                <div class="ipt-title" v-for="opt in qstForm.optList" :key="opt.optId">
                  <div>
                    <div class="ipt-title"><span class="required">*</span>题目</div>
                    <div class="qst-g">
                      <input type="text" v-model="opt.optNo" maxlength="10" placeholder="题号" class="ipt1 mr15" />
                      <input type="text" v-model="opt.optName" placeholder="请输入题目" class="ipt2 mr15" />
                      <input type="number" v-model="opt.izRight" placeholder="分值占比" class="ipt1 mr15" />
                      <div class="btn-r" @click="delOpt(opt)"><i class="iconfont">&#xea45;</i></div>
                    </div>
                  </div>
                  <div class="ipt-title"><span class="required">*</span>正确答案</div>
                  <div><textarea v-model="opt.answer" class="desc-txt" placeholder="请输入答案"></textarea></div>
                  <div class="ipt-title"><span class="required">*</span>答案关键字</div>
                  <div><textarea v-model="opt.keywords" class="desc-txt" placeholder="请输入答案的关键词，用 @-@ 相隔"></textarea></div>
                </div>
                <div class="mt10 cl-blue" @click="addOpt"><i class="iconfont">&#xea80;</i> 新增答题选项</div>
              </div>
              <div v-if="qstForm.kind===6">
                <div>
                  <div class="ipt-title"><span class="required">*</span>题目</div>
                  <div class="qst-g">
                    <input type="text" v-model="qstForm.qstNo" maxlength="10" placeholder="题号" class="ipt1 mr15" />
                    <input type="text" v-model="qstForm.title" placeholder="请输入题目" class="ipt2 mr15" />
                  </div>
                </div>
                <div>
                  <div class="ipt-title"><span class="required">*</span>关键词</div>
                  <div><textarea v-model="qstForm.keywords" class="desc-txt" placeholder="请输入关键词"></textarea></div>
                </div>
                <div>
                  <div class="ipt-title"><span class="required">*</span>附件</div>
                  <upload :kind="3" :types="2" :files="fileList" @setUrl="setUrl" />
                </div>
                <div class="ipt-title" v-for="opt in qstForm.optList" :key="opt.optId">
                  <div class="ipt-title"><span class="required">*</span>风险点</div>
                  <div class="qst-g">
                    <input type="text" v-model="opt.optNo" maxlength="10" placeholder="题号" class="ipt1 mr15" />
                    <input type="text" v-model="opt.imgNames" placeholder="请输入风险点的关键词" class="ipt2 mr15" />
                    <div class="btn-r" @click="delOpt(opt)"><i class="iconfont">&#xea45;</i></div>
                  </div>
                  <div><textarea v-model="opt.optName" class="desc-txt" placeholder="请输入风险点答案"></textarea></div>
                  <div class="ipt-title"><span class="required">*</span>事故类型</div>
                  <div class="qst-g">
                    <input type="text" v-model="opt.imgUrls" placeholder="请输入事故类型的关键词" class="ipt2 mr15" />
                    <div class="btn-r" @click="delOpt(opt)"><i class="iconfont">&#xea45;</i></div>
                  </div>
                  <div><textarea v-model="opt.answer" class="desc-txt" placeholder="请输入事故类型答案"></textarea></div>
                  <div class="ipt-title"><span class="required">*</span>管控措施</div>
                  <div class="qst-g">
                    <input type="text" v-model="opt.keywords" placeholder="请输入防范措施的关键词" class="ipt2 mr15" />
                    <div class="btn-r" @click="delOpt(opt)"><i class="iconfont">&#xea45;</i></div>
                  </div>
                  <div><textarea v-model="opt.remarks" class="desc-txt" placeholder="请输入防范措施答案"></textarea></div>
                </div>
                <div class="mt10 cl-blue" @click="addOpt"><i class="iconfont">&#xea80;</i> 新增答题选项</div>
              </div>
            </div>
            <div class="modal-footer">
              <div class="btn-pi mr15" @click="save"><i class="iconfont">&#xea90;</i> 保存</div>
              <div class="btn-d" @click="closeModal"><i class="iconfont">&#xea4f;</i> 取消</div>
            </div>
          </div>
        </c-scrollbar>
      </div>
    </transition>
    <loader :loadShow="loadShow" />
  </div>
</template>

<style scoped>
.qst-a {padding: 10px;}
.qst-b {padding: 0 20px 10px 20px; display: flex; display: -webkit-flex;}
.qst-c {display: inline-flex; display: -webkit-inline-flex;}
.qst-d {flex-grow: 1; text-align: right; padding-top: 10px; color: #666;}
.qst-e {border: 1px dashed #DDD; padding: 5px 15px 15px 15px; display: flex; display: -webkit-flex; flex-wrap: wrap; margin-bottom: 10px;}
.qst-f {display: inline-flex; display: -webkit-inline-flex;}
.qst-g {display: flex; display: -webkit-flex; margin-bottom: 8px;}
.qst-h {width: 80px; margin: 10px;}
.qst-i {margin-top: 5px;}
</style>